<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
<head th:replace="~{segmentation/_right_bottom_header::_header_common(~{::title},~{::link},~{::style})}">
    <meta charset="utf-8">
    <title>用户新增</title>
    <link>
    <style type="text/css"></style>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend>用户新增</legend>
        </fieldset>
        <form class="layui-form" id="userFormAdd" action="">
<!--            <div class="layui-form-item">-->
<!--                <label class="layui-form-label"><span class="required-red">*</span>员工状态-->
<!--                </label>-->
<!--                <div class="layui-input-block">-->
<!--                    <input type="text" name="staffStatus" id="staffStatus" lay-verify="required|number|staffStatus"-->
<!--                           lay-verType="tips"-->
<!--                           placeholder="请输入员工状态" autocomplete="off" class="layui-input">-->
<!--                </div>-->
<!--            </div>-->
<!--            <div class="layui-form-item">-->
<!--                <label class="layui-form-label"><span class="required-red">*</span>渠道状态-->
<!--                </label>-->
<!--                <div class="layui-input-block">-->
<!--                    <input type="text" name="channelStatus" id="channelStatus" lay-verify="required|number|channelStatus"-->
<!--                           lay-verType="tips"-->
<!--                           placeholder="请输入渠道状态" autocomplete="off" class="layui-input">-->
<!--                </div>-->
<!--            </div>-->
<!--            <div class="layui-form-item">-->
<!--                <label class="layui-form-label"><span class="required-red">*</span>帐号</label>-->
<!--                <div class="layui-input-block">-->
<!--                    <input type="text" name="account" id="account" lay-verify="required|account"-->
<!--                           lay-verType="tips"-->
<!--                           placeholder="请输入帐号" autocomplete="off" class="layui-input">-->
<!--                </div>-->
<!--            </div>-->
            <div class="layui-form-item">
                <label class="layui-form-label"><span class="required-red">*</span>手机号</label>
                <div class="layui-input-block">
                    <input type="text" name="phone" id="phone" lay-verify="required|phone|cphone"
                           lay-verType="tips"
                           placeholder="请输入手机号" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"><span class="required-red">*</span>邮箱</label>
                <div class="layui-input-block">
                    <input type="email" name="mail" id="mail" lay-verify="required|email|mail"
                           lay-verType="tips"
                           placeholder="请输入邮箱" autocomplete="off" class="layui-input">
                </div>
            </div>
<!--            <div class="layui-form-item">-->
<!--                <label class="layui-form-label"><span class="required-red">*</span>密码-->
<!--                </label>-->
<!--                <div class="layui-input-block">-->
<!--                    <input type="text" name="password" id="password" lay-verify="required|password"-->
<!--                           lay-verType="tips"-->
<!--                           placeholder="请输入密码" autocomplete="off" class="layui-input">-->
<!--                </div>-->
<!--            </div>-->
<!--            <div class="layui-form-item">-->
<!--                <label class="layui-form-label"><span class="required-red">*</span>关联推广编码-->
<!--                </label>-->
<!--                <div class="layui-input-block">-->
<!--                    <input type="text" name="promotionCode" id="promotionCode" lay-verify="required|promotionCode"-->
<!--                           lay-verType="tips"-->
<!--                           placeholder="请输入关联推广编码" autocomplete="off" class="layui-input">-->
<!--                </div>-->
<!--            </div>-->
<!--            <div class="layui-form-item">-->
<!--                <label class="layui-form-label"><span class="required-red">*</span>协议-->
<!--                </label>-->
<!--                <div class="layui-input-block">-->
<!--                    <input type="text" name="protocol" id="protocol" lay-verify="required|protocol"-->
<!--                           lay-verType="tips"-->
<!--                           placeholder="请输入协议" autocomplete="off" class="layui-input">-->
<!--                </div>-->
<!--            </div>-->
            <div class="layui-form-item">
                <label class="layui-form-label"><span class="required-red">*</span>姓名</label>
                <div class="layui-input-block">
                    <input type="text" name="fullName" id="fullName" lay-verify="required|fullName"
                           lay-verType="tips"
                           placeholder="请输入姓名" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"><span class="required-red">*</span>昵称</label>
                <div class="layui-input-block">
                    <input type="text" name="nickname" id="nickname" lay-verify="required|nickname"
                           lay-verType="tips"
                           placeholder="请输入昵称" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"><span class="required-red">*</span>性别</label>
                <div class="layui-input-block">
                    <input th:each="item : ${@typeServiceImpl.findByParentCodeList('sex')}"
                           th:title="${item.typeName}"
                           th:value="${item.typeValue}"
                           th:checked="${1 == item.typeValue}"
                           type="radio" name="sex" lay-verify="required|sex"
                           lay-verType="tips">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"><span class="required-red">*</span>年龄</label>
                <div class="layui-input-block">
                    <input type="text" name="age" id="age" lay-verify="required|number|age"
                           lay-verType="tips"
                           placeholder="请输入年龄" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"><span class="required-red">*</span>启用状态</label>
                <div class="layui-input-block">
                    <input th:each="item : ${@typeServiceImpl.findByParentCodeList('enableStatus')}"
                           th:title="${item.typeName}"
                           th:value="${item.typeValue}"
                           th:checked="${1 == item.typeValue}"
                           type="radio" name="enableStatus" lay-verify="required|enableStatus"
                           lay-verType="tips">
                </div>
            </div>
<!--            <div class="layui-form-item">-->
<!--                <label class="layui-form-label"><span class="required-red">*</span>头像编号-->
<!--                </label>-->
<!--                <div class="layui-input-block">-->
<!--                    <input type="text" name="headPortraitId" id="headPortraitId" lay-verify="required|number|headPortraitId"-->
<!--                           lay-verType="tips"-->
<!--                           placeholder="请输入头像编号" autocomplete="off" class="layui-input">-->
<!--                </div>-->
<!--            </div>-->
<!--            <div class="layui-form-item">-->
<!--                <label class="layui-form-label"><span class="required-red">*</span>头像-->
<!--                </label>-->
<!--                <div class="layui-input-block">-->
<!--                    <input type="text" name="headPortraitUrl" id="headPortraitUrl" lay-verify="required|headPortraitUrl"-->
<!--                           lay-verType="tips"-->
<!--                           placeholder="请输入头像" autocomplete="off" class="layui-input">-->
<!--                </div>-->
<!--            </div>-->
<!--            <div class="layui-form-item">-->
<!--                <label class="layui-form-label"><span class="required-red">*</span>微信代码-->
<!--                </label>-->
<!--                <div class="layui-input-block">-->
<!--                    <input type="text" name="weChatCode" id="weChatCode" lay-verify="required|weChatCode"-->
<!--                           lay-verType="tips"-->
<!--                           placeholder="请输入微信代码" autocomplete="off" class="layui-input">-->
<!--                </div>-->
<!--            </div>-->
<!--            <div class="layui-form-item">-->
<!--                <label class="layui-form-label"><span class="required-red">*</span>微信唯一代码-->
<!--                </label>-->
<!--                <div class="layui-input-block">-->
<!--                    <input type="text" name="weUnionId" id="weUnionId" lay-verify="required|weUnionId"-->
<!--                           lay-verType="tips"-->
<!--                           placeholder="请输入微信唯一代码" autocomplete="off" class="layui-input">-->
<!--                </div>-->
<!--            </div>-->
<!--            <div class="layui-form-item">-->
<!--                <label class="layui-form-label"><span class="required-red">*</span>盐-->
<!--                </label>-->
<!--                <div class="layui-input-block">-->
<!--                    <input type="text" name="salt" id="salt" lay-verify="required|salt"-->
<!--                           lay-verType="tips"-->
<!--                           placeholder="请输入盐" autocomplete="off" class="layui-input">-->
<!--                </div>-->
<!--            </div>-->
            <div class="layui-form-item custom-text-align"
                 sec:authorize="hasPermission(#authorization.authentication,'button','USER_LIST_MANAGEMENT:add')">
                <a class="layui-btn" lay-submit="" lay-filter="userFormAddSubmit">保存</a>
            </div>
        </form>
    </div>
</div>

<div th:replace="~{segmentation/_tail::_tail_common}"></div>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script th:inline="javascript">
    /*<![CDATA[*/
    [# sec:authorize="hasPermission(#authorization.authentication,'button','USER_LIST_MANAGEMENT:add')"]
    layui.use(['form'], function () {
        var form = layui.form,
            layer = layui.layer;

        var regPhone =
            /^((\+86|0086)?\s*)((134[0-8]\d{7})|(((13([0-3]|[5-9]))|(14[5-9])|15([0-3]|[5-9])|(16(2|[5-7]))|17([0-3]|[5-8])|18[0-9]|19(1|[8-9]))\d{8})|(14(0|1|4)0\d{7})|(1740([0-5]|[6-9]|[10-12])\d{7}))$/;
        var regEmail = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
        //自定义验证规则
        form.verify({
            enableStatus: function (value) {
                if (value.length > 10) {
                    return '启用状态最多10个字符';
                }
            },
            // staffStatus: function (value) {
            //     if (value.length > 10) {
            //         return '员工状态最多10个字符';
            //     }
            // },
            // channelStatus: function (value) {
            //     if (value.length > 10) {
            //         return '渠道状态最多10个字符';
            //     }
            // },
            account: function (value) {
                if (value.length > 20) {
                    return '帐号最多20个字符';
                }
            },
            cphone: function (value) {
                if (value.length > 16) {
                    return '手机号最多16个字符';
                }
                //自定义验证规则
                if (!regPhone.test(value)) {
                    return "请输入正确手机号码!";
                }
            },
            mail: function (value) {
                if (value.length > 64) {
                    return '邮箱最多64个字符';
                }
                //自定义验证规则
                if (!regEmail.test(value)) {
                    return "请输入正确邮箱!";
                }
            },
            // password: function (value) {
            //     if (value.length > 32) {
            //         return '密码最多32个字符';
            //     }
            // },
            // promotionCode: function (value) {
            //     if (value.length > 20) {
            //         return '关联推广编码最多20个字符';
            //     }
            // },
            fullName: function (value) {
                if (value.length > 32) {
                    return '姓名最多32个字符';
                }
            },
            nickname: function (value) {
                if (value.length > 32) {
                    return '昵称最多32个字符';
                }
            },
            sex: function (value) {
                // if (value.length > 10) {
                //     return '性别最多10个字符';
                // }
            },
            age: function (value) {
                if (value.length > 10) {
                    return '年龄错误';
                }
            },
            // headPortraitId: function (value) {
            //     if (value.length > 19) {
            //         return '头像编号最多19个字符';
            //     }
            // },
            // headPortraitUrl: function (value) {
            //     if (value.length > 255) {
            //         return '头像最多255个字符';
            //     }
            // },
            // weChatCode: function (value) {
            //     if (value.length > 255) {
            //         return '微信代码最多255个字符';
            //     }
            // },
            // weUnionId: function (value) {
            //     if (value.length > 255) {
            //         return '微信唯一代码最多255个字符';
            //     }
            // },
            // salt: function (value) {
            //     if (value.length > 32) {
            //         return '盐最多32个字符';
            //     }
            // },
        });

        //监听提交
        form.on('submit(userFormAddSubmit)', function (data) {
            $.ajax({
                type: 'POST',
                url: '/module/user/user/save',
                data: data.field,
                dataType: 'json',
                success: function (data) {
                    if (data.code == Result.SUCCESS) {
                        var content = "帐号：" + data.data.account + "， 密码：" + data.data.password;
                        layer.open({
                            id: "userAddId",
                            type: 0,
                            area: [100, 100],
                            fixed: true, //不固定
                            maxmin: true,
                            content: content,
                            shade: 0.4,
                            title: "帐号信息",
                            btn: ['复制'],
                            // success: successFun,//层弹出后的成功回调方法：layero前层DOM，index当前层索引
                            btn1: function(index, layero){
                                //第一个按钮事件
                                navigator.clipboard.writeText(content);
                                console.log(layero);
                                layer.close(index);
                            },
                            // cancel: cancelFun, //右上角关闭按钮触发的回调：默认会自动触发关闭。如果不想关闭，return false即可
                            // full:full,//还原后触发的回调：携带一个参数，即当前层DOM
                            // min:min,//还原后触发的回调：携带一个参数，即当前层DOM
                            // restore:restore,//还原后触发的回调：携带一个参数，即当前层DOM
                            end: function(){
                                //层销毁后触发的回调：无论是确认还是取消，只要层被销毁了，end都会执行，不携带任何参数。
                                $("#userList", window.parent.document).attr('value', 1);
                                var index = parent.layer.getFrameIndex(window.name);
                                parent.layer.close(index);
                            }
                        });
                        // layer.msg('成功!', {
                        //     icon: 1,
                        //     shade: [0.3, '#f5f5f5'],
                        //     time: 1500
                        // }, function () {
                        //
                        // });
                    } else {
                        layer.msg(data.msg, {
                            icon: 2,
                            time: 3000
                        });
                    }
                }, error: function (data) {
                    console.log(data);
                },
            });
            return false;//返回false防止重复提交
        });
    });
    [/]
    /*]]>*/
</script>

</body>
</html>